<template>
  <div class="recommend-wrapper">
    <div class="recommend-title">
      <span class="iconfont icon-heart">&#xe85c;</span> 猜你喜欢
    </div>

    <ul class="list">
      <router-link 
        :to ="'/detail/' + item.id" 
        class="list-item" 
        tag ="li"
        v-for="item in recommendList"  
        :key="item.id">

        <div class="item-img">
          <img
            :src="item.imgUrl"
          />
          <div class="item-img-tag">{{item.tag}}</div>
        </div>
        <div class="item-info">
          <div class="inner-box">
            <div class="info-title">{{item.title}}</div>
            <div class="info-comment">
              <span class="iconfont icon-star">&#xe670;</span>
              <span class="iconfont icon-star">&#xe670;</span>
              <span class="iconfont icon-star">&#xe670;</span>
              <span class="iconfont icon-star">&#xe670;</span>
              <span class="iconfont icon-star">&#xe670;</span>
              <span class="comment-num">{{item.commentNum}}条评论</span>
            </div>
            <div class="info-price">
              <span class="price">￥<em>{{item.price}}</em></span>起
              <span class="district">{{item.district}}</span>
            </div>
          </div>
        </div>
      </router-link>
    </ul>
    <div class="show-products">
     <router-link to="">查看所有产品</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeRecommend",
   props: {
    recommendList: Array
  },
  data() {
    return {
      
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl';
@import '~styles/mixins.styl';

.recommend-wrapper{
  margin-top: .2rem;
  background-color #fff;
}
.recommend-title {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.32rem;
  background-color: #fff;
  padding: 0 0.2rem;
  border-bottom: 1px solid #eee;
}

.recommend-title .icon-heart {
  color: #f10;
}

.show-products{
  padding: .2rem 0;
  border-top: 1px solid #eee;
  text-align: center;
  color: $lightTxtBlue;
}

.list-item {
  display: flex;
  width: 100%;
  height: 2.4rem;
}

.list-item .item-img {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.2rem;
  box-sizing: border-box;
}

.list-item .item-img .item-img-tag {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.02rem;
  height: 0.38rem;
  font-size: 0.2rem;
  color: #fff;
  text-align: center;
  line-height: 0.38rem;
  background-image: url('https://img1.qunarzz.com/piao/fusion/1802/52/b9080e45b69b4f02.png'); // img1.qunarzz.com/piao/fusion/1802/52/b9080e45b69b4f02.png);
  background-size: 100% 100%;
}

.list-item .item-img img {
  width: 100%;
  height: 100%;
}

.list-item .item-info {
  flex: 1;
  padding: .4rem .1rem;
  min-width: 0;
}

.list-item .item-info .inner-box {
  width:100%;
  height: 100%;
}

.item-info .inner-box .info-title {
  width: 100%;
  height: .6rem;
  line-height:.6rem;
  font-size: .32rem;
  ellipsis();
 }

 .item-info .inner-box .info-comment {
  width: 100%;
  height: .4rem;
  line-height:.4rem;
  font-size: .24rem;
 }

.item-info .inner-box .info-comment .icon-star {
  font-size: .2rem;
  color: #ffb436;
}

 .item-info .inner-box .info-comment .comment-num {
   margin-left: .2rem;
   color: $lightTxtColor;
 }
 
 .item-info .inner-box .info-price {
   position: relative;
   width:100%;
   height: .6rem;
   line-height:.6rem;
   font-size: .24rem;
   color: $lightTxtColor;
   
 }
 .item-info .inner-box .info-price .price  {
   color: $orange;
 }

  .item-info .inner-box .info-price .price em{
    font-size:.4rem;
  }
 .item-info .inner-box .info-price .district {
   position: absolute;
   bottom: 0;
   right: .24rem;
 }
</style>
